import React, {ReactNode,useCallback} from 'react';
import {Text, TextStyle, StyleProp, ViewStyle,TextLayoutEventData} from 'react-native';
import { normalize } from '../../utils/adapter';

type FontWeight = TextStyle['fontWeight'];

export type Props = {
  fontSize?: number;
  color?: string;
  fontWeight?: FontWeight;
  children?: string | number | undefined | ReactNode;
  lineNumber?: number;
  style?: StyleProp<ViewStyle>;
  textLayoutChange?:(isOverflow:boolean)=> void
};

const BasicText = ({
  fontSize = normalize(14),
  color = '#fff',
  fontWeight = 'bold',
  lineNumber = 1,
  style,
  children,
  textLayoutChange,
}: Props): JSX.Element => {

  const textLayout = useCallback((e:{nativeEvent:TextLayoutEventData}) => {
    const { lines } = e.nativeEvent;
    textLayoutChange &&  textLayoutChange(lines.length > lineNumber);
  },[lineNumber,textLayoutChange]);

  return (
    <Text
      style={[{fontSize, color, fontWeight}, {...(style as object)}]}
      numberOfLines={lineNumber}
      ellipsizeMode={'tail'}
      onTextLayout={textLayout}
      >
      {children}
    </Text>
  );
};

export default BasicText;
